<template>
    <div>
        <el-table ref="dataTable" :data="dataSource.list || []" :height="tableHeight" :stripe="options.stripe"
            :border="options.border" highlight-current-row @row-click="handleRowClick"
            @selection-change="handleSelectionChange">
            <!-- 选择框 -->
            <el-table-column v-if="options.selectType && options.selectType == 'checkbox'" type="selection" width="50"
                align="center"></el-table-column>
            <!-- 序号 -->
            <el-table-column v-if="options.showIndex" label="序号" type="index" width="60"
                align="center"></el-table-column>
            <!-- 数据列 -->
            <template v-for="(column, index) in columns">
                <template v-if="column.scopedSlots">
                    <el-table-column :key="index" :prop="column.prop" :label="column.label"
                        :align="column.align || 'left'" :width="column.width" :fixed="column.fixed">
                        <template #default="scope">
                            <slot :name="column.scopedSlots" :index="scope.$index" :row="scope.row"></slot>
                        </template>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column :key="index" :prop="column.prop" :label="column.label"
                        :align="column.align || 'left'" :width="column.width" :fixed="column.fixed">
                    </el-table-column>
                </template>
            </template>
        </el-table>
        <!-- 分页 -->
        <div class="pagination" v-if="showPagination">
            <el-pagination v-if="dataSource.totalCount" background :total="dataSource.totalCount"
                :page-sizes="[15, 30, 50, 100]" :page-size="dataSource.pageSize" :current-page.sync="dataSource.pageNo"
                layout="total,sizes,prev,pager,next,jumper" @size-change="handlePageSizeChange"
                @current-change="handlePageNoChange"></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    dataSource: {
        type: Object,
    },
    //是否展示分页
    showPageination: {
        type: Boolean,
        default: true,
    },
    //表格属性
    options: {
        type: Object,
        default: {
            tableHeight: null,
            stripe: true,
            border: false,
            extHeight: 0,
            showIndex: false,
        },
    },
    //数据列
    columns: Array,
    fetch: Function,//获取数据函数
    initFetch: {
        type: Boolean,
        default: true,
    },
    showPagination: {
        type: Boolean,
        default: true,
    }
});

//顶部60  内容区域距离顶部20 内容上下间距15*2  分页高度46
const topHeight = 60 + 20 + 30 + 46

const tableHeight = ref(
    // props.options.tableHeight?props.options.tableHeight:window.innerHeight-topHeight-80
    props.options.tableHeight ? props.options.tableHeight : window.innerHeight - topHeight - (props.options.extHeight || 0)
);

const init = () => {
    if (props.initFetch && props.fetch) {
        props.fetch()
    }
}

init();

const dataTable = ref();
const clearSelection = () => {
    dataTable.value.clearSelection();
}

const setCurrentRow = (rowKey, rowValue) => {
    let row = props.dataSource.list.find((item) => {
        return item[rowKey] == rowValue
    })

    // dataSource.value.setCurrentRow(row)
}

//将子组件暴露出去，否则父组件无法调用
defineExpose({ setCurrentRow, clearSelection })

const emit = defineEmits(["rowSelected", "rowClick"])
// const emit = defineEmits(['rowSelected', 'rowClick']);

const handleRowClick = (row) => {
    emit("rowClick", row)
}

const handleSelectionChange = (row) => {
    emit("rowSelected", row)
}

//切换分页
const handlePageSizeChange = (size) => {
    //这里将要改变的值变成一个对象就可以进行对值得修改 一般是不允许改变props得值的
    props.dataSource.pageSize = size;
    props.dataSource.pageNo = 1
    props.fetch();
}

const handlePageNoChange = (pageNo) => {
    props.dataSource.pageNo = pageNo;
    props.fetch();
}

</script>

<style lang="scss">
.pagination {
    padding-top: 10px;
}

.el-pagination {
    justify-content: right;
}

.el-table__body tr.current-row>tb.el-table__cell {
    background-color: #e6f0f9;
}

.el-table__body tr:hover>tb.el-table__cell {
    background-color: #e6f0f9 !important;
}
</style>